<template>
  <div id="brroot">
    <div class="card bg-light text-left">
      <div class="card-body">
        <p class="card-title">bus routes</p>
        <div class="form-group row">
          <label for="br-direct" class="col-sm-4 col-form-label">Direct</label>
          <div class="col-sm-8">
            <select name="br-direct" id="br-direct" class="custom-select br-select" v-model="odirect">
              <option :value="0">All</option>
              <option :value="1">Go</option>
              <option :value="2">Back</option>
            </select>
          </div>
        </div>
        <div class="form-group row">
          <label for="br-line" class="col-sm-4 col-form-label">Line</label>
          <div class="col-sm-8">
            <select name="br-line" id="br-line" class="custom-select br-select" v-model="oline" @change="lineChanged">
              <option :value="0">All</option>
              <option v-for="sl in select_lines" :value="sl.id" :key="sl.id">
                {{ sl.id }}
              </option>
            </select>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Request from '@/utils/request'
import * as API from '@/consts/api'
import BMap from 'BMap'
export default {
  name: 'bus-routes',
  data () {
    return {
      lines: [],
      odirect: 0,
      oline: 0,
      map: {}, // 地图实例
      linestyle: {}, // 线的样式
      overlays: [] // 当前地图覆盖物
      // drawingManager: {} // 地图绘制工具
    }
  },
  methods: {
    /**
     * 选择方向事件
     */
    directChange () {
      return true
    },
    /**
     * 选择线路事件
     */
    lineChange () {
      return true
    },
    /**
     * 同步线路数据
     */
    syncLines (isFirst = false) {
      return Request.doGet(API.getlines).then(response => {
        this.lines = response
        if (isFirst) {
          this.loadLines(this.lines)
        }
      })
    },
    /**
     * 初始化地图元素
     */
    initMapElements () {
      this.map = this.$store.state.map.map
      this.linestyle = {
        strokeColor: 'red', // 边线颜色。
        fillColor: 'red', // 填充颜色。当参数为空时，圆形将没有填充效果。
        strokeWeight: 3, // 边线的宽度，以像素为单位。
        strokeOpacity: 0.8, // 边线透明度，取值范围0 - 1。
        fillOpacity: 0.6, // 填充的透明度，取值范围0 - 1。
        strokeStyle: 'solid' // 边线的样式，solid或dashed。
      }
    },
    /**
     * 清除绘制图层
     */
    clearMap () {
      for (var i = 0; i < this.overlays.length; i++) {
        this.map.removeOverlay(this.overlays[i])
      }
      this.overlays = []
    },
    /**
     * 加载线路
     */
    loadLines (lines) {
      this.clearMap() // 加载前先清除所有覆盖物
      for (let bl of lines) {
        let points = this.LLtoPoint(bl.points)
        let line = new BMap.Polyline(points, this.linestyle)
        this.overlays.push(line)
        this.map.addOverlay(line)
      }
    },
    /**
     * 根据坐标对生成点
     */
    LLtoPoint (lls) {
      let points = []
      for (let ll of lls) {
        let point = new BMap.Point(ll.lng, ll.lat)
        points.push(point)
      }
      return points
    },
    /**
     * 根据点生成坐标对
     */
    PointtoLL (points) {
      let lls = []
      for (let p of points) {
        let ll = {lng: p.lng, lat: p.lat}
        lls.push(ll)
      }
      return lls
    },
    /**
     * 加载选中的线路
     */
    lineChanged () {
      let tline = []
      for (let bl of this.lines) {
        if (bl.id === this.oline) {
          tline.push(bl)
          break
        }
      }
      if (this.oline === 0) {
        tline = this.lines
      }
      this.loadLines(tline)
    }
  },
  computed: {
    /**
     * 线路下路控件的数据
     */
    select_lines () {
      let sls = []
      for (let i = 0; i < this.lines.length; i++) {
        sls.push({id: this.lines[i].id, line: this.lines[i]})
      }
      return sls
    }
  },
  // watch: {
  //   /**
  //    * 加载选中的线路
  //    */
  //   oline: function (val) {
  //     let tline = []
  //     for (let bl of this.lines) {
  //       if (bl.id === val) {
  //         tline.push(bl)
  //         break
  //       }
  //     }
  //     if (val === -1 || val === '-1') {
  //       tline = this.lines
  //     }
  //     this.loadLines(tline)
  //   }
  // },
  mounted () {
    this.initMapElements()
    this.syncLines(true)
  },
  destroyed () {
    this.clearMap()
  }
}
</script>

<style scoped>
.br-select:hover {
  cursor: pointer;
}
</style>
